<template>
	<div class="good-list-wrap">
		<div class="model-content">
			<!--搜索条件-->
			<div class="model-content-seach" v-if="!role_id" >
				<el-form size="mini" :inline="true">
					<el-form-item>
						<el-button type="primary" size="small" @click="addGood">添加商品</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="model-content-table">
				<!--表格-->
				<el-table :data="tableData" v-loading="loading" border style="width: 100%">
					<el-table-column label="活动名称" prop='name' align="center">
					</el-table-column>
					<el-table-column label="产品名称" prop='title' align="center">
					</el-table-column>
					<el-table-column label="主图" prop='thumb' align="center">
						<template slot-scope="scope">
							<img style="width: 100px;height: 100px;" :src="scope.row.thumb" alt="">
						</template>
					</el-table-column>
					<el-table-column label="活动价" align="center">
						<template slot-scope="scope">
							{{ scope.row.activity_price | yuan }}
						</template>
					</el-table-column>
					<el-table-column label="原价" align="center">
						<template slot-scope="scope">
							{{ scope.row.market_price | yuan }}
						</template>
					</el-table-column>
					<el-table-column label="规格" prop='specification' align="center">
					</el-table-column>
					<el-table-column label="型号" prop='pattern' align="center">
					</el-table-column>
					<el-table-column label="功率" prop='power' align="center">
					</el-table-column>
					<el-table-column label="操作" v-if="!role_id" align="center"  >
						<template slot-scope="scope">
							<el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
							<el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!--分页-->
			<div class="model-footer">
				<el-pagination @current-change="handleCurrentChange" :current-page="page.current_page" :page-size="page.per_page"
layout="total, prev, pager, next, jumper" :total="page.total">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		GOOD_LIST
	} from '@/api/good'
	export default {
		data() {
			const role_id = +localStorage.getItem('role_id')
			return {
				role_id,
				loading: false,
				tableData: [],
				page: {},
			}
		},
		watch: {
			$route() {
				this.initPageQuery()
			}
		},
		mounted() {
			this.initPageQuery()
		},
		methods: {
			addGood() { //添加商品
				this.$router.push({
					name: 'good_list_addGood'
				})
			},
			edit(row) {
				this.$router.push({
					name: 'good_list_addGood',
					query: {
						id: row.id
					}
				})
			},
			del(row) {
				this.$confirm('确定要删出该商品吗', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					
					this.$http.delete(`${GOOD_LIST}/${row.id}`)
						.then(() => {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.initPageQuery()
						})
				}).catch(() => {

				});
			},
			handleCurrentChange(page) {
				this.$routePlugin.addQuery({
					page
				});
			},
			initPageQuery() {
				const {
					page
				} = this.$route.query

				this.searchRequest({
					page
				})
			},
			searchRequest(options) {
				const {
					page
				} = options

				let params = {}
				params['page'] = page || 1
				this.initPageData(params)
			},
			initPageData(params) {
				this.loading = true
				this.$http.get(GOOD_LIST, {
					params
				}).then(res => {
					this.loading = false
					const {
						data,
						meta
					} = res.data

					console.log(res.data, 55)
					this.tableData = data;
					this.page = meta
				})
			},
		}
	}
</script>

<style lang="scss">
	.good-list-wrap {}
</style>
